<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧滑</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            overflow: hidden;
        }

        li {
            display: flex;
            align-items: center;
            height: 50px;
            border-bottom: 1px solid #ebe8e8;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 14px;
            position: relative;
           
        }

        .action {
            color: #fff;
            font-size: 14px;
            width: 165px;
            display: flex;
            height: 100%;
            position: absolute;
            right: -165px;
        }

        .action div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action .top {
            background: #009bfe;
        }

        .action .read {
            background: #fe8d3f;
        }

        .action .delt {
            background: #ff5967;
        }
    </style>
</head>

<body>

    <ul>
        <li>
            测试1
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
        <li>
            测试2
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
        <li>
            测试3
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
    </ul>
</body>
<script>
    // 0 关闭状态   -165 打开状态
    let startX = 0, leftXArr = [];
    _("ul li").forEach(function (v, i) {
        v.ontouchstart = function (e) {

            startX = e.touches[0].clientX
            _("ul li").forEach(function (item, j) {
                if (i != j) {
                    item.style = `
                        transform: translateX(0px);
                    `
                }
            })
        }


        v.ontouchmove = function (e) {

            let moveX = e.touches[0].clientX
            // 左滑moveX 小于 startX， 右滑 大于
            // 左滑
            if (determineDirection(moveX, startX)) {
                // console.log("左滑: ", moveX);

                let currentX = v.style.transform.replace(/[^0-9]/ig, '')

                if (-currentX != -165) {
                    console.log(222);
                    v.style = `
                        transform: translateX(-${startX - moveX > 165 ? '165' : startX - moveX}px);
                    `
                } else {
                    leftXArr.push(moveX)

                    console.log("leftXArr: ", leftXArr);
                    if (leftXArr[leftXArr.length - 1] > leftXArr[leftXArr.length - 2]) {
                        leftXArr = []
                        console.log("左边的右滑动");
                        let x = -165 + (leftXArr[leftXArr.length - 1] - leftXArr[0]);
                        v.style = `
                            transform: translateX(${x}px);
                        `

                    } else {
                        console.log("左边的左滑动");
                    }

                }

                v.open = true
            } else {
                console.log("右滑");
                if (v.open) {
                    let x = -165 + (moveX - startX);
                    v.style = `
                        transform: translateX(${x > 0 ? 0 : x}px);
                    `
                }
            }
        }

        v.ontouchend = function (e) {
            let endX = e.changedTouches[0].clientX
            if (determineDirection(endX, startX)) {
                if ((startX - endX) < 55) {
                    v.style = `
                  transform: translateX(0px);
                `;
                    v.open = false

                } else {
                    v.style = `
                  transform: translateX(-165px);
                `
                }
            } else {
                if ((endX - startX) < 55 && endX != startX) {
                    v.style = `
                        transform: translateX(-165px);
                    `
                } else {
                    v.style = `
                        transform: translateX(0px);
                    `
                    v.open = false

                }
            }
        }
    })

    //  x1 moveX  x2 startX  true 左滑  false 右滑
    function determineDirection(x1, x2) {
        return x1 < x2 ? true : false
    }

    function $(className) {
        return document.querySelector(className);
    }

    function _(className) {
        return document.querySelectorAll(className);
    }
</script>

</html>